<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/views/include/taglib.jsp"%>
<skyline:setSessionAttrToVar var="user" key="SESSION_USER"/>
<c:set var="portraitPath" scope="page" value="${pageContext.request.contextPath}/image/" />
<html>
<head>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/plugin/jalert/jquery.alerts.css" />
<style type="text/css">
#statusBarTable {
	background: #14283C;
	color: #eee;
	height:30px;
	font-size: 16px;
	font-family: Calibri, "Trebuchet MS", sans-serif;
	border:0px;
	border-collapse:0px;
	border-spacing:0px; 
}

#searchKey {
	BORDER: #b2b2b2 1px solid;
	HEIGHT: 18px;
	WIDTH: 180px;
}

#searchSubmit {
	HEIGHT: 24px;
	WIDTH: 56px;
}

#onlineUserDiv {
	width:100%; 
	position:fixed!important; 
	position:absolute; 
	left:0px; 
	top:0px; 
	top:expression(offsetParent.scrollTop);
	z-index:9999;
}

#goTopDiv {
	 position:fixed!important;
	 position:absolute; 
	 bottom:18px;
	 right:18px;
	 top:expression(offsetParent.scrollTop);
}

a.goTopA:link,a.goTopA:visited {
	filter:alpha(opacity=60);
	-moz-opacity:0.60;
	-khtml-opacity: 0.60;
	opacity: 0.60;
}

a.goTopA img {
	border:0px;
	width:38px;
	height:38px;
}

a.goTopA:hover,a.goTopA:active {
	filter:alpha(opacity=90);
	-moz-opacity:0.90;
	-khtml-opacity: 0.90;
	opacity: 0.90;
}

        
/* remove all list stylings */
.menu, .menu ul {
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
	display: block;
}

.menu li {
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	float: left;	/* move all main list items into one row, by floating them */
	position: relative;	/* position each LI, thus creating potential IE.win overlap problem */
	z-index: 5;		/* thus we need to apply explicit z-index here... */
}

.menu li:hover {
	z-index: 10000;	/* ...and here. this makes sure active item is always above anything else in the menu */
	white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
							see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}

.menu li li {
	float: none;/* items of the nested menus are kept on separate lines */
}

.menu ul {
	visibility: hidden;	/* initially hide all submenus. */
	position: absolute;
	z-index: 10;
	left: 0;	/* while hidden, always keep them at the top left corner, */
	top: 0;		/* 		to avoid scrollbars as much as possible */
}

.menu li:hover>ul {
	visibility: visible;	/* display submenu them on hover */
	top: 100%;	/* 1st level go below their parent item */
}

.menu li li:hover>ul {	/* 2nd+ levels go on the right side of the parent item */
	top: 0;
	left: 100%;
}

/* -- float.clear --
	force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
}
.menu, .menu ul {	/* IE7 float clear: */
	min-height: 0;
}
/* -- float.clear.END --  */

/* -- sticky.submenu --
	it should not disappear when your mouse moves a bit outside the submenu
	YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
	if you do it, make sure you 110% know what you do */
.menu ul {
	/*background-image: url(empty.gif);required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
	padding: 10px 30px 30px 30px;
	margin: -10px 0 0 -30px;
	/*background: #f00;*/	/* uncomment this if you want to see the "safe" area.
								you can also use to adjust the safe area to your requirement */
}
.menu ul ul {
	padding: 30px 30px 30px 10px;
	margin: -30px 0 0 -10px;
}
/* -- sticky.submenu.END -- */

/* - - - ADxMenu: DESIGN styles [ OPTIONAL, design your heart out :) ] - - - */

.menu, .menu ul li {
	color: #eee;
	background: #14283C;
}

.menu ul {
	width: 11em;
}

.menu a {
	text-decoration: none;
	color: #eee;
	padding: .4em 1em;
	display: block;
	position: relative;
}

.menu a:hover, .menu li:hover>a {
	color: #fc3;
}

.menu li li {	/* create borders around each item */
	border: 1px solid #ccc;
	top :1px;
}
.menu ul>li + li {	/* and remove the top border on all but first item in the list */
	border-top: 0;
}

.menu li li:hover>ul {	/* inset 2nd+ submenus, to show off overlapping */
	top: 0px;
	left: 90%;
}

</style>
<SCRIPT type=text/javascript>
function goTop(acceleration, time) {
 acceleration = acceleration || 0.2;
 time = time || 12;
 
 var x1 = 0;
 var y1 = 0;
 var x2 = 0;
 var y2 = 0;
 var x3 = 0;
 var y3 = 0;
 
 if (document.documentElement) {
  x1 = document.documentElement.scrollLeft || 0;
  y1 = document.documentElement.scrollTop || 0;
 }

 if (document.body) {
  x2 = document.body.scrollLeft || 0;
  y2 = document.body.scrollTop || 0;
 }
 //alert(y2);
 var x3 = window.scrollX || 0;
 var y3 = window.scrollY || 0;
 
 var x = Math.max(x1, Math.max(x2, x3));
 var y = Math.max(y1, Math.max(y2, y3));
 
 var speed = 1 + acceleration;
 window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
 
 if(x > 0 || y > 0) {
  var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
  window.setTimeout(invokeFunction, time);
 }
}
</SCRIPT>
</head>
<body>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/plugin/jalert/jquery.ui.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/plugin/jalert/jquery.alerts.js"></script>
<script type="text/javascript">
	var getOnlineUserUrl = "${pageContext.request.contextPath}/getlogineduser.html";
	var portraitPath = "${pageContext.request.contextPath}/image/";
	var ajaxLoginUrl = "${pageContext.request.contextPath}/ajaxlogin.html";
	
	var woUrl = "${pageContext.request.contextPath}/wo/myWo.html";
	var addArticleUrl = "${pageContext.request.contextPath}/article/add.html";
	var myArticleUrl = "${pageContext.request.contextPath}/article/list/user/";
	var manageArticleUrl = "${pageContext.request.contextPath}/article/category/manage.html";

	var addAlbumUrl = "${pageContext.request.contextPath}/album/newalbum.html";
	var myAlbumUrl = "${pageContext.request.contextPath}/album/list/";
	
	var myShareUrl = "${pageContext.request.contextPath}/share/list/user/";
	var myAttentionUrl = "${pageContext.request.contextPath}/";
	
	var logoutUrl = "${pageContext.request.contextPath}/logout.html";
	var loginedUser=null;

	function ajaxLogin() {
		var ajaxLoginTable = "<table><tr><td colspan='2'><font color='red' id='loginFailMessage' style='display:none'>用户名或者密码错误，请重试</font></td></tr><tr><td>E-mail:</td><td><input type='text' id='ajaxLoginEmail'/></td></tr><tr><td>密码:</td><td><input type='password' id='ajaxLoginPassword'></td></tr><tr><td colspan='2' align='right'><input type='button' onclick='ajaxLoginSubmit()' value='提交'>&nbsp;<input type='button' onclick='ajaxLoginCancel()' value='取消'>&nbsp;&nbsp;</td></tr></table>";
		jMessageBox(ajaxLoginTable, '用户登陆');
	}

	function ajaxLoginSubmit() {
		var email = document.getElementById("ajaxLoginEmail").value;
		var password = document.getElementById("ajaxLoginPassword").value;
		$
				.ajax({
					url : ajaxLoginUrl,
					data : "email=" + email + "&password=" + password,
					type : "POST",
					dataType : "json",
					contentType : "application/x-www-form-urlencoded; charset=utf-8",
					success : function(msg) {
						if (msg == true) {
							//$.alerts._hide();
							//getOnlineUser();
							//window.location="#";
							location.reload();
						} else {
							document.getElementById("loginFailMessage").style.display = "";
						}
					}
				});
	}

	function ajaxLoginCancel() {
		$.alerts._hide();
	}

	function genOnlineUserInfo(user) {
		var offlineUserInfo = "<td>目前状态:游客<input type='button' onclick='ajaxLogin()' value='登陆'/><input type='button' onclick='window.location.href=\"${pageContext.request.contextPath}/regist.html\"' value='注册'/></td>";
		var search = "<td width='320px' align='right' valign='middle'><form action=''><input type='text' id='searchKey' name='key'/><input type='submit' id='searchSubmit' value='搜索'></form></td>";
		//<select name='type' id='seachType'><option value='user'>人</option><option value='point'>景点</option><option value='artile'>日志</option><option value='album'>相册</option></select>
		if (user.id == 0) {
			return offlineUserInfo + search;
		} else {
			var innerHTML = "";
			var portrait = user.portrait?user.portrait:"head.jpg";
			innerHTML += "<td width='32px'><img src='"+portraitPath+portrait+"' width='30px' height='30px'></td>";
			innerHTML += "<td width='120px'><font style='font-size:14px'>" + user.nickname + "</font></td>";
			innerHTML += "<td>"+genStatusBarTools(user)+"</td>";
			return innerHTML + search;
		}
	}
	
	function genStatusBarTools(user){
		var tools="<div id='menuDiv'><ul class='menu'>";
				tools+="<li><a href='"+woUrl+"' title='点击进行个人主页'>主页</a></li>";
				tools+="<li><a href='"+myArticleUrl+user.id+".html' title='点击浏览我的日志'>日志</a>";
					tools+="<ul>";
						tools+="<li><a href='"+addArticleUrl+"' title='点击即可发表新的日志'>发表日志</a></li>";
						tools+="<li><a href='"+myArticleUrl+user.id+".html' title='点击浏览我的日志'>我的日志</a></li>";
						//tools+="<li><a href='"+myArticleUrl+user.id+".html' title='点击浏览我的日志'>我的草稿箱</a></li>";
						tools+="<li><a href='"+manageArticleUrl+"' title='点击进行日志分类管理'>分类管理</a></li>";
					tools+="</ul>";
				tools+="</li>";
				tools+="<li><a href='http://www.aplus.co.yu/'>相册</a>";
					tools+="<ul>";
						//tools+="<li><a href='http://www.aplus.co.yu/'>上传照片</a></li>";
						tools+="<li><a href='"+addAlbumUrl+"' title='点击浏览创建新相册'>创建相册</a></li>";
						tools+="<li><a href='"+myAlbumUrl+user.id+".html' title='点击浏览我的相册'>我的相册</a></li>";
						//tools+="<li><a href='http://www.aplus.co.yu/archive/'>相册管理</a></li>";
					tools+="</ul>";
				tools+="</li>";
				tools+="<li><a href='"+myAttentionUrl+"/follow/"+user.id+".html' title='My idols'>关注</a>";
					tools+="<ul>";
						tools+="<li><a href= '"+myAttentionUrl+"/fans/"+user.id+".html'>我的粉丝</a></li>";
						tools+="<li><a href='"+myAttentionUrl+"/follow/"+user.id+".html?type=USER'>我的偶像</a></li>";
						tools+="<li><a href='"+myAttentionUrl+"/follow/"+user.id+".html?type=ATTRACTION'>景点</a></li>";
						//tools+="<li><a href='http://www.aplus.co.yu/archive/'>圈子</a></li>";
					tools+="</ul>";
				tools+="</li>";
				tools+="<li><a href='"+myShareUrl+user.id+".html' title='分享'>分享</a>";
					tools+="<ul>";
						tools+="<li><a href='"+myShareUrl+user.id+".html' title='我的所有分享'>我的所有分享</a>";
						tools+="<li><a href='"+myShareUrl+user.id+"/ARTICLE.html' title='我的日志分享'>我的日志分享</a>";
						tools+="<li><a href='"+myShareUrl+user.id+"/PHOTO.html' title='我的照片分享'>我的照片分享</a>";
						tools+="<li><a href='"+myShareUrl+user.id+"/VIDEO.html' title='我的视频分享'>我的视频分享</a>";
						//tools+="<li><a href='http://www.aplus.co.yu/'>日志</a></li>";
						//tools+="<li><a href='http://www.aplus.co.yu/feeds/'>相册</a></li>";
						//tools+="<li><a href='http://www.aplus.co.yu/archive/'>我偶像的分享</a></li>";
					tools+="</ul>";
				tools+="</li>";
				tools+="<li><a href='http://www.aplus.co.yu/' title='My writings'>帐号</a>";
					tools+="<ul>";
						tools+="<li><a href='http://www.aplus.co.yu/'>修改个人信息</a></li>";
						tools+="<li><a href='http://www.aplus.co.yu/feeds/'>修改安全信息</a></li>";
						tools+="<li><a href='"+logoutUrl+"' title='点击退出'>注销</a></li>";
					tools+="</ul>";
				tools+="</li>";
			tools+="</ul></div>";			
		return tools;

	}
	

	function genOnlineUserDiv(user) {
		var innerHTML = "";
		innerHTML += "<table id='statusBarTable' width='100%'><tr><td width='100px'></td>";
		innerHTML += genOnlineUserInfo(user);
		var onlineUserDiv = document.getElementById("onlineUserDiv");
		innerHTML += "<td width='20px'></td></tr></table>";
		onlineUserDiv.innerHTML = innerHTML;
	}

	function getOnlineUser() {
		$.ajax({
			url : getOnlineUserUrl,
			data : null,
			type : "POST",
			dataType : "json",
			contentType : "application/x-www-form-urlencoded; charset=utf-8",
			success : function(msg) {
				loginedUser=msg;
				try {
					if(commentObjs){
						for(var i=0;i<commentObjNum;i++){
							commentObjs[i].getLoginedUser();
						}
					}
				}catch(e){
					
				}
				genOnlineUserDiv(msg);
			}
		});
		//alert(loginedUser);
	}
</script>

<div  id="onlineUserDiv"></div>
<!-- 
<div id="ajaxLoginDiv" style="display:none"><table><tr><td align="center" colspan="2">用户登陆</td></tr><tr><td>E-mail:</td><td><input type="text" id="ajaxLoginEmail"/></td></tr><tr><td>密码:</td><td><input type="password" id="ajaxLoginPassword"></td></tr><tr><td colspan="2" align="right"><input type="button" value="提交">&nbsp;&nbsp;&nbsp;</td></tr></table></div>
 -->
<script type="text/javascript">
	getOnlineUser();
</script>
<div id="goTopDiv"><A class="goTopA" onclick="goTop();return false;"  href="javascript:void(0);"><img src="${pageContext.request.contextPath}/img/commons/goTop.png" alt="返回顶部"></A> </div>
</body>
</html>
<!--
<table width="1002px"> 
<tr>
<td width="120px">
<c:choose>
	<c:when test="${user!=null}">
		<img src="${portraitPath}/${user.portrait}" width="40px" height="40px"/>
	</c:when>
	<c:otherwise>
		<form>
			E-mail:<input type="text" name="email" size="16">
			密码:<input type="password" name="password" size="16">
		</form>
	</c:otherwise>
</c:choose>
</td>
</tr>
</table>
 -->